<script setup lang="ts">
import {computed, getCurrentInstance, ref} from "vue";
import type {BookArea, BookDate, BookStatus, BookTime, UserBookStatusReqVO} from "@/interfaces/book";
import {onLoad, onShow} from "@dcloudio/uni-app";
import {useGetAreaListApi, useGetTimeListApi, useUserBookStatusApi} from "@/services/api";
import moment from "moment";
import 'moment/dist/locale/zh-cn'
import {useStore} from "vuex";

moment.locale('zh-cn')
const bookArea = ref<BookArea>({
  id: 0,
  label: "",
  deskCount:0
})
const store = useStore()
const showSelect = ref<boolean>(false)
const areaColumns = ref<BookArea[][]>([])
const bookDate = ref<BookDate[]>([])
const bookTime = ref<BookTime[]>([])
const userBookStatusReq = ref<UserBookStatusReqVO>({
  bookDate: "",
  id: store.getters["auth/getUserId"]
})
const bookStatus = ref<BookStatus[]>([])
const isSelectedTime = computed(()=>bookTime.value.filter(value => value.isSelect).length > 0)
const isBook = computed(()=> bookStatus.value.map(value => value.bookTimeQuantumId))
const selectedBookDate = computed(()=>bookDate.value.filter(value => value.isSelect)[0].date)
const isExpire = computed(()=> bookTime.value.map(value => moment(selectedBookDate.value+' '+value.timeQuantum.split('-')[1]+':00').isBefore(moment())))
const onConfirm = (e: any) => {
  const {value} = e
  bookArea.value.label = value[0].label
  bookArea.value.id = parseInt(value[0].id)
  showSelect.value = false
  resetBookTime()
  getBookStatus()
}
const onSelect = (index:number):void => {
  bookDate.value.forEach((value)=> value.isSelect = false)
  bookDate.value[index].isSelect = true
  resetBookTime()
  getBookStatus()
}
const resetBookTime = () =>{
  bookTime.value.forEach(value => value.isSelect = false)
}
const onSelectTime = (index:number):void =>{
  bookTime.value[index].isSelect = !bookTime.value[index].isSelect
}
const book = () => {
  const data = {
    area:bookArea.value,
    date:bookDate.value.filter(value => value.isSelect)[0],
    timeList:bookTime.value.filter(value => value.isSelect).map(value => value.id)
  }
  uni.navigateTo({
    url:`/pages/book/seat?data=${JSON.stringify(data)}`
  })
}
const createDate = () =>{
  moment.locale('zh-cn')
  const list = []
  list.push({
    week:'今天',
    date:moment().format('YYYY-MM-DD'),
    isSelect:true
  })
  for (let i = 1; i < 6; i++) {
    list.push({
      week:moment().add(i,'day').format('dddd'),
      date:moment().add(i,'day').format('YYYY-MM-DD'),
      isSelect:false
    })
  }
   bookDate.value = list
}
const getBookStatus = async () =>{
  userBookStatusReq.value.bookDate = bookDate.value.filter(value => value.isSelect)[0].date
  const {data:res} = await useUserBookStatusApi(userBookStatusReq.value)
  bookStatus.value = res
}
const init = async ()=>{
  const {data:areas} = await useGetAreaListApi()
  areaColumns.value = [areas]
  const {data:timeQuantum} = await useGetTimeListApi()
  bookTime.value = timeQuantum
  createDate()
  await getBookStatus()
}
onShow(()=>{
  const {refs} = getCurrentInstance()
  store.dispatch("auth/setUToast", refs.uToast.show)
  init()
})
onLoad((e): void => {
  bookArea.value = {
    label:e?.label,
    id:parseInt(e?.id),
    deskCount:e?.deskCount
  }
  init()
  console.log(bookDate.value)
})
</script>

<template>
  <view class="container">
    <u-toast ref="uToast"></u-toast>
    <view class="area">
      <u-tag :text="bookArea.label" size="large" plain></u-tag>
      <view class="area-button">
        <u-button type="primary" text="选择" @click="showSelect = true"></u-button>
      </view>
    </view>
    <view class="time">
      <view class="title">
        请选择预约日期
      </view>
      <u-grid
          :border="false"
          col="3"
      >
        <u-grid-item
            v-for="(date,index) in bookDate"
            :key="index"
        >
          <view :class="{date:true,selected:date.isSelect}" @click="onSelect(index)">
            <view>{{date.week}}</view>
            <view>{{date.date}}</view>
          </view>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="time">
      <view class="title">
        请选择预约时间段
      </view>
      <u-grid
          :border="false"
          col="3"
      >
        <u-grid-item
            v-for="(time,index) in bookTime"
            :key="index"
        >
          <view v-if="!isBook.includes(time.id) && !isExpire[index]" :class="{date:true,selected:time.isSelect}" @click="onSelectTime(index)">
            <view>{{time.timeQuantum}}</view>
          </view>
          <view v-else class="book-time-disabled">
            <view>{{time.timeQuantum}}</view>
          </view>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="book-button">
      <u-button type="error" text="预约" @click="book" :disabled="!isSelectedTime" shape="circle"></u-button>
    </view>
    <u-picker
        :show="showSelect"
        :columns="areaColumns"
        keyName="label"
        @confirm="onConfirm"
        @cancel="showSelect = false"
    ></u-picker>
  </view>
</template>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  .area {
    width: 90%;
    padding: 48rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    background-color: #f6f6f6;
    gap: 24rpx;
  }
  .time{
    width: 90%;
    padding: 32rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .date{
      padding: 24rpx;
      margin-bottom: 12rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 24rpx;
      border: 1px solid #dd524d;
      gap:12rpx;
    }
    .selected{
      background-color: #dd524d;
      color: #ffffff;
    }
    .book-time-disabled{
      padding: 24rpx;
      margin-bottom: 12rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 24rpx;
      gap:12rpx;
      border: 1px solid #dddddd;
      background-color: #F5F5F5;
      color:#ACA899;
    }
    .title{
      padding-top: 12rpx;
      padding-bottom: 24rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: #dd524d;
    }
  }
  .book-button{
    width: 90%;
    position: fixed;
    bottom: 3%;
  }
}
</style>